<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>仁爱宠物医院</title>
  <link rel="stylesheet" href="../css/home.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- <link rel="stylesheet" href="../css/index.css"> -->
  <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  <link href="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.staticfile.net/twitter-bootstrap/5.1.1/js/bootstrap.bundle.min.js"></script>
  <script src="https://www.jq22.com/demo/number202111050044/js/number.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
</head>

<style>
  #slide {
    width: 100%;
    height: 400px;
    position: relative;
  }

  #slide li {
    list-style: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s;
  }

  #slide li.active {
    opacity: 1;
  }
</style>

<body>
  <div id="about">
    <!-- 页面头部 -->
    <header>
      <div style="display: flex;">
        <div class="container">
          <div class="row">
            <div class="col-lg-1" style="text-align: right;">
              <img src="../img/cat-foot.svg" height="40px" width="40px" />
            </div>
            <div class="col-lg-2" style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
              <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
            </div>
            <div class="col-lg-7">
              <ul style="font-family: 得意黑;">
                <li class="li_header"><a class="a_header" href="./home.html">首页</a></li>
                <li class="li_header"><a class="a_header" href="./about.html">关于仁爱</a></li>
                <li class="li_header"><a class="a_header" href="./service.html">服务项目</a></li>
                <li class="li_header"><a class="a_header" href="./keep_a_pet.html">养宠小百科</a></li>
                <li class="li_header"><a class="a_header" href="./join_us.html">加入我们</a></li>
                <li class="li_header"><a class="a_header" href="./shop.html">线上商店</a></li>
                <li class="li_header"><a class="a_header" href="./message.html">在线留言</a></li>
                <li id="li_1" class="li_header"><a class="a_header" href="./login.html">登录/注册</a></li>
                <li id="li_2" class="li_header"><a class="a_header" href="./userinfo.html">个人中心</a></li>
              </ul>
            </div>
            <div class="col-lg-2" style="text-align: left;overflow: hidden; position: relative;">
              <input type="text" style="margin-top: 8px;" id="name">
              <img onclick="search()" src="../img/search.png" alt="" width="23px" height="23px"
                style="position: absolute; top: 11px; left: 135px; cursor: pointer;">
            </div>
          </div>
        </div>
      </div>
    </header>
    <!-- 一 -->
    <section style="position: relative; width: 100%;">
      <div>
        <ul id="slide">
          <li class="active"><img src="../img/about_banner.png" width="100%" height="100%" alt=""></li>
          <li><img src="../img/about_banner1.jfif" width="100%" height="100%" alt=""></li>
          <li><img src="../img/about_banner2.jfif" width="100%" height="100%" alt=""></li>
        </ul>
      </div>
    </section>
    <!-- 二 -->
    <section>
      <div class="container">
        <div class="about_two_div_class" style="display: flex;">
          <div style="width: 50%; position: relative; padding-top: 8%; overflow: hidden;">
            <h5 class="about_two_h5_class" style="color: red;">关于我们</h5>
            <h1 class="about_two_h1_class" style="margin-top: 7%; margin-bottom: 10%; font-size: 65px; width: 70%;">
              我们很乐意照顾您的宠物</h1>
            <span class="about_two_sapn_class"
              style="font-size: 18px;width: 80%; display: block;">归根结底，宠物护理和兽医服务对于确保我们毛茸茸、有羽毛或有鳞片的朋友过上幸福、健康的生活至关重要。</span>
            <div style="display: flex; margin-top: 5%;">
              <div class="about_two_div1_class" style="width: 50%;">
                <div style="display: flex;">
                  <img src="../img/tick.svg" alt="">
                  <span style="margin-left: 3%;">最佳兽医</span>
                </div>
                <div style="display: flex; margin-top: 8%;">
                  <img src="../img/tick.svg" alt="">
                  <span style="margin-left: 3%;">美容</span>
                </div>
              </div>
              <div class="about_two_div2_class" style="width: 50%;">
                <div style="display: flex;">
                  <img src="../img/tick.svg" alt="">
                  <span style="margin-left: 3%;">24/7小时护理</span>
                </div>
                <div style="display: flex; margin-top: 8%;">
                  <img src="../img/tick.svg" alt="">
                  <span style="margin-left: 3%;">最佳食物</span>
                </div>
              </div>
            </div>
            <button class="about_two_btn_class"
              style="margin-top: 5%; color: #000; background-color: #ffcc37; font-weight: 700; padding: 20px 25px;border-radius: 10px;">更多关于我们</button>
          </div>
          <div class="about_two_div3_class" style="width: 50%; position: relative; overflow: hidden; padding-top: 10%;">
            <img style="position: absolute; bottom: 0; right: 30%; z-index: 2;" src="../img/about-dot.png" alt="">
            <img style="z-index: 30;position: relative;" src="../img//about-2.png" alt="">
            <img style="z-index: 30;position: relative;margin-left: 3%;" src="../img//about-3.png" alt="">
          </div>
        </div>
      </div>
    </section>
    <!-- 三 -->
    <section class="homt_three_div_class" style="margin-top: 5%; overflow: hidden; position: relative;">
      <img src="../img/customer-bg.svg" alt="" width="100%" style="z-index: 1;">
      <div class="container">
        <div style="position: absolute; top: 35%; left: 0; display: flex; z-index: 30;color: #fff;width: 100%;">
          <div class="five_div" style="margin-left: auto;">
            <h2 style="font-weight: 700;font-size: 55px;"><span class="timer counter" data-to="5"
                data-speed="1500"></span>K+</h2>
            <span>满意的客户</span>
          </div>
          <div class="five_div">
            <h2 style="font-weight: 700;font-size: 55px;"><span class="timer counter" data-to="13"
                data-speed="1500"></span>+</h2>
            <span>奖</span>
          </div>
          <div class="five_div">
            <h2 style="font-weight: 700;font-size: 55px;"><span class="timer counter" data-to="60"
                data-speed="1500"></span>+</h2>
            <span>专业人士</span>
          </div>
          <div class="five_div" style="margin-right: auto;">
            <h2 style="font-weight: 700;font-size: 55px;"><span class="timer counter" data-to="8"
                data-speed="1500"></span>+</h2>
            <span>多年经验</span>
          </div>
        </div>
      </div>
    </section>
    <!-- 四 -->
    <section style="position: relative; padding-bottom: 5%; background-color: #ffefea; padding-top: 5%;">
      <div class="container about_four_class">
        <div class="about_four_div_class" style="display: flex;">
          <div style="width: 50%; position: relative;">
            <img src="../img/mission-lg.png" alt="">
            <img style="position: absolute; top: 15%; right: 20%; border: 5px solid #fff; border-radius: 15px;"
              src="../img/mission-sm-1.png" alt="">
            <img style="position: absolute; bottom: -12%; right: 20%; border: 5px solid #fff; border-radius: 15px;"
              src="../img/mission-sm-2.png" alt="">
          </div>
          <div style="width: 50%; position: relative; overflow: hidden;">
            <h5 style="color: red;">我们的使命</h5>
            <h1 style="margin-bottom: 7%; font-size: 65px; width: 80%;">守护每一只宠物的健康与幸福</h1>
            <span style="font-size: 16px;width: 90%; display: block;">提供专业的宠物医疗服务，包括诊断、治疗、手术和预防保健。我们的团队由经验丰富的兽医和护理人员组成，
              他们不仅具备专业技能，还对动物充满爱心。医院配备了先进的医疗设备，能够处理各种常见及紧急宠物健康问题。</span>
            <div style="overflow: hidden;">
              <div style="margin-top: 3%;">
                <span style="font-weight: 600; font-size: 14px;">客户满意度</span>
                <div style="width: 100%; height: 10px; background-color: #ffded5;border-radius: 5px;">
                  <div style="width: 60%; height: 10px; background-color: #ff5b2e;border-radius: 5px;"></div>
                </div>
              </div>
              <div style="margin-top: 3%;">
                <span style="font-weight: 600; font-size: 14px;">客户粘度</span>
                <div style="width: 100%; height: 10px; background-color: #ffded5;border-radius: 5px;">
                  <div style="width: 80%; height: 10px; background-color: #ff5b2e;border-radius: 5px;"></div>
                </div>
              </div>
            </div>
            <div style="margin-top: 5%;">
              <span>
                宠物医院致力于提供高品质、全方位的宠物医疗服务。我们的使命是通过专业的医疗团队、
                先进的医疗设备和深厚的爱心，为每一位宠物病人提供科学、细心的医疗照顾。我们追求卓越，不断进步，确保每一只宠物都能享受到最好的健康保障，让宠物主人安心、满意。
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>
    <!-- 五 -->
    <section style="padding-bottom: 3%; margin-top: 5%;">
      <div class="container" style="margin-bottom: 2%;">
        <h2>主要团队成员</h2>
      </div>
      <div class="container home_five_div_class" style="display: flex;padding-left: 2%;">
        <div class="six_class home_five_div1_class"
          style="background-color: #fff; padding-bottom: 2%; box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); margin: auto;">
          <img src="../img/team-home-1.jpg" alt="">
          <h3 style="text-align: center;margin-top: 3%;">凯西</h3>
          <span style="text-align: center; display: block;">兽医</span>
        </div>
        <div class="six_class home_five_div2_class"
          style="background-color: #fff; padding-bottom: 2%; box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); margin: auto;">
          <img src="../img/team-home-2.jpg" alt="">
          <h3 style="text-align: center;margin-top: 3%;">巴里</h3>
          <span style="text-align: center; display: block;">美容师经理</span>
        </div>
        <div class="six_class home_five_div3_class"
          style="background-color: #fff; padding-bottom: 2%; box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); margin: auto;">
          <img src="../img/team-home-3.jpg" alt="">
          <h3 style="text-align: center;margin-top: 3%;">卡罗尔</h3>
          <span style="text-align: center; display: block;">日托经理</span>
        </div>
        <div class="six_class home_five_div4_class"
          style="background-color: #fff; padding-bottom: 2%; box-shadow: 1px 1px 5px rgba(0, 0, 0, .1); margin: auto;">
          <img src="../img/team-home-4.jpg" alt="">
          <h3 style="text-align: center;margin-top: 3%;">朱莉</h3>
          <span style="text-align: center; display: block;">寄宿经理</span>
        </div>
      </div>
    </section>
    <!-- 页尾 -->
    <footer style="background-color: #2f2d53;height: 350px; overflow: hidden; padding-top: 5%;">
      <div class="container">
        <div style="display: flex; padding-left: 20%;">
          <div style="width: 35%;">
            <div style="display: flex;">
              <div style="text-align: right;">
                <img src="../img/cat-foot.svg" height="40px" width="40px" />
              </div>
              <div style="padding: 0;text-align: left;color: #ff5b2e;padding-top: 3px;">
                <h3 style="font-weight: 700; font-family: 得意黑;">仁爱宠物医院</h3>
              </div>
            </div>
            <div style="color: #fff; margin-top: 5%;">
              <span>
                宠物护理和兽医服务对于维持<br>我们心爱的动物伴侣的健康和福祉至关重要
              </span>
            </div>
          </div>
          <div style="display: flex; width: 65%;">
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">快速链接</h4><br>
              <h6><a style="color: #fff !important;" href="./about.html">关于我们</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">服务项目</a></h6><br>
              <h6><a style="color: #fff !important;" href="./service.html">线上商店</a></h6>
            </div>
            <div style="overflow: hidden; margin-left: 15%;">
              <h4 style="color: #fff;">法律</h4><br>
              <h6 style="color: #fff;">常见问题</h6><br>
              <h6 style="color: #fff;">条款及细则</h6><br>
              <h6 style="color: #fff;">隐私与政策</h6>
            </div>
          </div>
        </div>
        <span style="color: #fff; display: block; text-align: center; font-size: 14px; margin-top: 2%;">©2024年
          版权所有仁爱宠物医院</span>
      </div>
    </footer>
  </div>
</body>

<script>

  // 数字滚动脚本
  $(window).ready(function () {
    $('.timer').each(count);
    function count(options) {
      var $this = $(this);
      options = $.extend({}, options || {}, $this.data('countToOptions') || {});
      $this.countTo(options);
    }
    $(".math").removeClass("timer");
  })

  const intersectionObserver6 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    // 数字滚动脚本
    $('.timer').each(count);
    function count(options) {
      var $this = $(this);
      options = $.extend({}, options || {}, $this.data('countToOptions') || {});
      $this.countTo(options);
    }
    $(".math").removeClass("timer");
  })
  intersectionObserver6.observe(document.querySelector('.homt_three_div_class'))

  const inter1 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.5 } })
    t1.from('.home_five_div1_class', { y: 200, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_five_div2_class', { y: 200, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_five_div3_class', { y: 200, ease: "power1.out", duration: 1, opacity: 0 })
    t1.from('.home_five_div4_class', { y: 200, ease: "power1.out", duration: 1, opacity: 0 })
  })
  inter1.observe(document.querySelector('.home_five_div_class'))

  const inter2 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.5, duration: 1 } })
    t1.from('.about_four_div_class', { y: 200, ease: "power1.out", opacity: 0 })
  })
  inter2.observe(document.querySelector('.about_four_class'))

  const inter5 = new IntersectionObserver(entries => {
    if (entries[0].intersectionRatio <= 0) return
    let t1 = gsap.timeline({ defaults: { repeatDelay: 0.5, duration: 1 } })
    t1.from('.about_two_h5_class', { y: 200, ease: "power1.out", opacity: 0 })
    t1.from('.about_two_h1_class', { y: 200, ease: "power1.out", opacity: 0 })
    t1.from('.about_two_sapn_class', { y: 200, ease: "power1.out", opacity: 0 })
    t1.from('.about_two_div1_class', { y: 200, ease: "power1.out", opacity: 0 })
    t1.from('.about_two_div2_class', { y: 200, ease: "power1.out", opacity: 0 })
    t1.from('.about_two_div3_class', { y: 200, ease: "power1.out", opacity: 0 })
    t1.from('.about_two_btn_class', { y: 200, ease: "power1.out", opacity: 0 })
  })
  inter5.observe(document.querySelector('.about_two_div_class'))

  let btnThisList1 = document.querySelectorAll('.six_class');
  btnThisList1.forEach(function (item) {
    //鼠标移入
    item.addEventListener('mouseover', function (event) {
      item.style.transform = 'scale(1.1)';
    })
    //鼠标移出
    item.addEventListener('mouseout', function (event) {
      item.style.transform = 'scale(1)';
    })
  })

  // 轮播图
  let slide = document.getElementById('slide');
  let slideList = slide.querySelectorAll('li');
  let node = null;
  let index = 0;
  let timer = setInterval(function () {
    if (node != null) node.className = "";
    index = index >= slideList.length - 1 ? 0 : index + 1;
    slideList[index].className = "active";
    node = slideList[index];
  }, 5000)
</script>
<script>
  // 当页面刚加载完时调用
  window.onload = function () {
    if (localStorage.getItem("userId")) {
      // 说明已经登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "none";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'block';
    } else {
      //没有登录
      let li_1 = document.getElementById('li_1');
      li_1.style.display = "block";
      let li_2 = document.getElementById('li_2');
      li_2.style.display = 'none';
    }
  }
</script>
<script>
  function search() {
    const name = document.getElementById("name").value;
    localStorage.setItem("name",name);
    window.location.href = './shop.html'
  }
</script>

</html>